<style lang="less">
@import '../../../styles/common.less';
.main_item {
  margin: 10px;
  padding: 10px 0px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.main_item_title {
  cursor: pointer;
  border-bottom: 0px solid #ddd;
  margin: 0px;
  padding: 0px 10px;
}
.main_item_title_span {
  font-size: 12px;
}
.main_item_content {
  display: none;
  margin: 10px 0px 0px 0px;
  border-top: 1px solid #ddd;
}
.main_item_content_block {
  display: block;
  margin: 10px 0px 0px 0px;
  border-top: 1px solid #ddd;
}
.content_item {
  margin: 10px;
  padding: 5px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.content_item_backsuccess {
  background: #ccffdd;
}
.content_item_backproble {
  background: #ffddcc;
}
</style>
<template>
    <Card>
        <!-- 魔蝎数据start -->
        <div class='main_item'>
            <div @click="dataShow('mxData')" id="moxx" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">魔蝎数据</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="mxDataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="mxDataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="mxDataCount > 0">(有
                    <label>{{mxDataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="mxData_icon"></Icon>
                </span>
            </div>
            <div id="mxData" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':mxItem.code == 1}" v-for="(mxItem,mxIndex) in mxDataArr" :key="mxItem">
                        <div @click="dataShow('mxDataItem'+mxIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{mxItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'mxDataItem'+mxIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'mxDataItem'+mxIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in mxItem.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 魔蝎数据end -->
        <!-- 上海资信start -->
        <div class='main_item'>
            <div @click="dataShow('shzxData')" id="moxx" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">上海资信</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="shzxDataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="shzxDataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="shzxDataCount > 0">(有
                    <label>{{shzxDataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="shzxData_icon"></Icon>
                </span>
            </div>
            <div id="shzxData" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':shzxItem.code == 1}" v-for="(shzxItem,shzxIndex) in shzxDataArr" :key="shzxItem">
                        <div @click="dataShow('shzxDataItem'+shzxIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{shzxItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'shzxDataItem'+shzxIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'shzxDataItem'+shzxIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in shzxItem.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 上海资信end -->
        <!-- 交叉检验start -->
        <div class='main_item'>
            <div @click="dataShow('hisData')" id="moxx" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">交叉检验</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="hisDataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="hisDataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="hisDataCount > 0">(有
                    <label>{{hisDataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="hisData_icon"></Icon>
                </span>
            </div>
            <div id="hisData" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':hisItem.code == 1}" v-for="(hisItem,hisIndex) in hisDataArr" :key="hisItem">
                        <div @click="dataShow('hisDataItem'+hisIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{hisItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'hisDataItem'+hisIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'hisDataItem'+hisIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in hisItem.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 交叉检验end -->
        <!-- 征信前置start -->
        <div class='main_item'>
            <div @click="dataShow('aliData')" id="moxx" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">征信前置</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="aliDataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="aliDataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="aliDataCount > 0">(有
                    <label>{{aliDataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="mxData_icon"></Icon>
                </span>
            </div>
            <div id="aliData" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':aliItem.code == 1}" v-for="(aliItem,aliIndex) in aliDataArr" :key="aliItem">
                        <div @click="dataShow('aliDataItem'+aliIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{aliItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'aliDataItem'+aliIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'aliDataItem'+aliIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in aliItem.msg" :key="msgItem">{{msgIndex}}{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 征信前置end -->
        <!-- 卡牛房贷还款记录start -->
        <div class='main_item'>
            <div @click="dataShow('knfdData')" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">卡牛房贷还款记录</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="knfdDataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="knfdDataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="knfdDataCount > 0">(有
                    <label>{{knfdDataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="knfdData_icon"></Icon>
                </span>
            </div>
            <div id="knfdData" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':knfdItem.code == 1}" v-for="(knfdItem,knfdIndex) in knfdDataArr" :key="knfdItem">
                        <div @click="dataShow('knfdDataItem'+knfdIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{knfdItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'knfdDataItem'+knfdIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'knfdDataItem'+knfdIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in knfdItem.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 卡牛房贷还款记录end -->
        <!-- 卡牛喜刷刷魔蝎数据start knxssData -->
        <div class='main_item'>
            <div @click="dataShow('knxssData')" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">卡牛喜刷刷魔蝎数据</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="knxssDataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="knxssDataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="knxssDataCount > 0">(有
                    <label>{{knxssDataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="knxssData_icon"></Icon>
                </span>
            </div>
            <div id="knxssData" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':knxssItem.code == 1}" v-for="(knxssItem,knxssIndex) in knxssDataArr" :key="knxssItem">
                        <div @click="dataShow('knxssDataItem'+knxssIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{knxssItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'knxssDataItem'+knxssIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'knxssDataItem'+knxssIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in knxssItem.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 卡牛喜刷刷魔蝎数据end -->
        <!-- 普通喜刷刷卡牛数据start -->
        <div class='main_item'>
            <div @click="dataShow('knData')" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">普通喜刷刷卡牛数据</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="knDataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="knDataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="knDataCount > 0">(有
                    <label>{{knDataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="knData_icon"></Icon>
                </span>
            </div>
            <div id="knData" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':knItem.code == 1}" v-for="(knItem,knIndex) in knDataArr" :key="knItem">
                        <div @click="dataShow('knDataItem'+knIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{knItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'knDataItem'+knIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'knDataItem'+knIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in knItem.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 普通喜刷刷卡牛数据end -->
        <!-- 51公积金数据start -->
        <div class='main_item'>
            <div @click="dataShow('gjj51Data')" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">51公积金数据</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="gjj51DataCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="gjj51DataCount == 0">(一致)</span>
                <span style="color:red" class="main_item_title_span" v-if="gjj51DataCount > 0">(有
                    <label>{{gjj51DataCount}}</label>项不一致)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="gjj51Data_icon"></Icon>
                </span>
            </div>
            <div id="gjj51Data" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':gjj51Item.code === 1}" v-for="(gjj51Item,gjj51Index) in gjj51DataArr" :key="gjj51Item">
                        <div @click="dataShow('gjj51DataItem'+gjj51Index)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{gjj51Item.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'gjj51DataItem'+gjj51Index+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'gjj51DataItem'+gjj51Index" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in gjj51Item.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 51公积金数据end -->
        <!-- 墨菲评分start -->
        <div class='main_item'>
            <div @click="dataShow('mfDecision')" class="main_item_title">
                <span style="font-weight:bold;" icon="md-arrow-dropdown">墨菲评分</span>
                &nbsp;&nbsp;&nbsp;&nbsp;
                <span style="color:red" class="main_item_title_span" v-if="mfDecisionCount == -1">(无数据)</span>
                <span style="color:green" class="main_item_title_span" v-if="mfDecisionCount == 0">(有评分)</span>
                <span style="color:red" class="main_item_title_span" v-if="mfDecisionCount > 0">(无评分)</span>
                <span style="float:right">
                    <Icon type="md-arrow-dropdown" id="mfDecision_icon"></Icon>
                </span>
            </div>
            <div id="mfDecision" class="main_item_content">
                <div style="margin:3px 10px 3px 10px;">
                    <div class="content_item content_item_backsuccess" :class="{'content_item content_item_backproble':mfDecisionItem.code === 1}" v-for="(mfDecisionItem,mfDecisionIndex) in mfDecisionArr" :key="mfDecisionItem">
                        <div @click="dataShow('mfDecisionItem'+mfDecisionIndex)" style="cursor:pointer">
                            <span style="font-weight:bold;" icon="md-arrow-dropdown">{{mfDecisionItem.title}} </span>
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            <span style="float:right">
                                <Icon type="md-arrow-dropdown" :id="'mfDecisionItem'+mfDecisionIndex+'_icon'"></Icon>
                            </span>
                        </div>
                        <div :id="'mfDecisionItem'+mfDecisionIndex" class="main_item_content">
                            <div v-for="(msgItem,msgIndex) in mfDecisionItem.msg" :key="msgItem">{{msgIndex}}:{{msgItem}}</div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <!-- 墨菲评分end -->
    </Card>
</template>

<script>

export default {
  components: {

  },
  name: 'risk-tips-form',
  data () {
    return {
      loanId: '',
      mxDataCount: 0,
      mxDataArr: [],
      shzxDataCount: 0,
      shzxDataArr: [],
      hisDataCount: 0,
      hisDataArr: [],
      aliDataCount: 0,
      aliDataArr: [],
      knfdDataCount: 0,
      knfdDataArr: [],
      knDataCount: 0,
      knDataArr: [],
      knxssDataCount: 0,
      knxssDataArr: [],
      gjj51DataCount: 0,
      gjj51DataArr: [],
      mfDecisionCount: 0,
      mfDecisionArr: [],
      dataShowFlag: 'none'
    }
  },
  methods: {
    dataShow: function (tagId) {
      //   $('#' + tagId).toggle() <Icon type="md-arrow-dropup" />
      //   if ($('#' + tagId).css('display') === 'none') {
      //     $('#' + tagId + '_icon').removeClass('ivu-icon ivu-icon-arrow-up-b')
      //     $('#' + tagId + '_icon').addClass('ivu-icon ivu-icon-md-arrow-dropdown')
      //   } else {
      //     $('#' + tagId + '_icon').removeClass('ivu-icon ivu-icon-md-arrow-dropdown')
      //     $('#' + tagId + '_icon').addClass('ivu-icon ivu-icon-arrow-up-b')
      //   }
      var clickTag = document.getElementById(tagId)
      if (clickTag.className === 'main_item_content') {
        clickTag.className = 'main_item_content_block'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropup'
      } else {
        clickTag.className = 'main_item_content'
        document.getElementById(tagId + '_icon').className = 'ivu-icon ivu-icon-md-arrow-dropdown'
      }
    },
    aliData: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/aliData', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data

        vm.aliDataCount = data.data.disaccordCount | 0
        this.aliDataArr = data.data.tips
        if (this.aliDataArr.length === 0) {
          vm.aliDataCount = -1
        }
      }).catch(er => {

      })
    },
    hisData: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/hisData', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data

        vm.hisDataCount = data.data.disaccordCount | 0
        this.hisDataArr = data.data.tips
        if (this.hisDataArr.length === 0) {
          vm.hisDataCount = -1
        }
      }).catch(er => {

      })
    },
    knfdData: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/knfdData', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data

        vm.knfdDataCount = data.data.disaccordCount | 0
        this.knfdDataArr = data.data.tips
        if (this.knfdDataArr.length === 0) {
          vm.knfdDataCount = -1
        }
      }).catch(er => {

      })
    },
    gjj51Data: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/gjj51Data', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data

        vm.gjj51DataCount = data.data.disaccordCount | 0
        this.gjj51DataArr = data.data.tips

        if (this.gjj51DataArr.length === 0) {
          vm.gjj51DataCount = -1
        }
      }).catch(er => {

      })
    },
    knData: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/knData', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data

        vm.knDataCount = data.data.disaccordCount | 0
        this.knDataArr = data.data.tips
        if (this.knDataArr.length === 0) {
          vm.knDataCount = -1
        }
      }).catch(er => {

      })
    },
    knxssData: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/knxssData', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data
        vm.knxssDataCount = data.data.disaccordCount | 0
        this.knxssDataArr = data.data.tips
        if (this.knxssDataArr.length === 0) {
          vm.knxssDataCount = -1
        }
      }).catch(er => {

      })
    },
    shzxData: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/shzxData', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data

        vm.shzxDataCount = data.data.disaccordCount | 0
        this.shzxDataArr = data.data.tips
        if (this.shzxDataArr.length === 0) {
          vm.shzxDataCount = -1
        }
      }).catch(er => {

      })
    },
    mxData: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/mxData', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data
        vm.mxDataCount = data.data.disaccordCount | 0
        this.mxDataArr = data.data.tips
        if (this.mxDataArr.length === 0) {
          vm.mxDataCount = -1
        }
      }).catch(er => {

      })
    },
    mfDecision: function () {
      var vm = this
      this.$ajax.get(this.$appContext.marvels_core_approve + 'approve/risktips/service/mfDecision', { params: { loanId: this.loanId } }).then(re => {
        var data = re.data

        vm.mfDecisionCount = data.data.disaccordCount | 0

        this.mfDecisionArr = data.data.tips
        if (this.mfDecisionArr.length === 0) {
          vm.mfDecisionCount = -1
        }
      }).catch(er => {

      })
    },
    initpage () {
      this.mxData()
      this.shzxData()
      this.aliData()
      this.hisData()
      this.knfdData()
      this.gjj51Data()
      this.knData()
      this.knxssData()
      this.mfDecision()
    }
  },
  computed: {

  },
  mounted () {
  },
  created () {

  },
  watch: {
    'taskParams.riskTipsForm' (v) {
      if (v) {
        this.$ajax = this.$util.ajax()
        this.loanId = this.taskParams.curLoanId

        this.initpage()
      }
    }
  },
  props: {
    taskParams: Object
  }
}
</script>
